<script lang="tsx">
import { get, post, message } from '@/utils'
import useRender from '@/views/visualEditor/useRender'
import { FormInstance } from '@arco-design/web-vue'
import cloneDeep from 'lodash/cloneDeep'
import useConfig from '@/views/system/useConfig'
import configRender from '@/sysConfig'
const { renderPropsItem } = useRender()
export default defineComponent({
  props: {},
  setup(props, { emit }) {
    const formRef = ref() as Ref<FormInstance>
    const { formatRenderList, formatResquestRenderList, formatCustom } = useConfig()
    const detail = reactive({
      configKey: 'birthday.coupon',
      configName: '生日优惠券配置',
      id: '1810931515375321094',
      configValue: {},
      configExt: [] as DiyConfigOptions[],
    })
    const submit = () => {
      /**处理自定义组件 */
      const renderOption = formatCustom(cloneDeep(detail.configExt))
      const query = {
        id: detail.id,
        configKey: detail.configKey,
        configValue: JSON.stringify(detail.configValue),
        configExt: formatRenderList(renderOption),
      }
      console.log(query)
      // return
      formRef.value.validate(err => {
        if (!err) {
          post({ url: '/server-system/admin/config/submit', data: query }, ({ code, msg }) => {
            message({
              type: code == 200 ? 'success' : 'error',
              content: msg,
            })
            emit('update:show', false)
            emit('confirm')
          })
        }
      })
    }

    const getInfo = () => {
      // return
      get({ url: '/server-system/admin/config/info', data: { id: detail.id } }, ({ data }) => {
        detail.configKey = data.configKey
        detail.configValue = JSON.parse(data.configValue)
        const renderOption = formatResquestRenderList(configRender[data.configKey])
        detail.configExt = formatCustom(renderOption, true)
        detail.configName = data.configName
      }) || []
    }

    watch(
      () => detail.configValue,
      newVal => {
        detail.configExt.map(v => {
          v.defaultValue = newVal[v.valueKey as string]
        })
      },
      {
        deep: true,
      }
    )
    onMounted(() => {
      getInfo()
    })

    return () => (
      <div class="page">
        <div class="content">
          <a-form model={detail.configValue} ref={formRef} label-align="left" label-col-props={{ span: 1 }} wrapper-col-props={{ span: 21 }}>
            {detail?.configExt?.map(props => renderPropsItem(props, detail.configValue))}
            <a-form-item label="">
              <a-button type="primary" style="margin:auto;width:200px" onClick={() => submit()}>
                保存
              </a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
    )
  },
})
</script>
<style lang="less" scoped>
.page {
  background: white;
  padding: 10px;
  // .content {
  //   max-width: 1300px;
  // }
  :deep(.drag-item) {
    border: 1px solid #eee;
    padding: 10px 5px;
    margin-bottom: 5px;
    box-shadow: 0 0 10px #eee;
    .arco-form-item {
      margin-bottom: 0px;
    }
  }
}
</style>
